<template>
    <div>
        <NavBar> <template v-slot:default>选择管理</template></NavBar>
        <div class="address-body">
            <van-address-list
                    v-model="chosenAddressId"
                    :list="list"
                    :disabled-list="disabledList"
                    disabled-text="以下地址超出配送范围"
                    default-tag-text="默认"
                    @add="onAdd"
                    @edit="onEdit"
            />
        </div>
    </div>
</template>

<script>
    import {Getaddress} from "../../../network/address";
    import {useRouter} from 'vue-router'
    import { Toast } from 'vant';
    import {onMounted,reactive,toRefs} from 'vue'
    import NavBar from "../../../components/common/navbar/NavBar";
    export default {
        name: "Address",
        components: {NavBar},
        setup(){
            const state =reactive({
                chosenAddressId:1,
                list:[],
                disabledList:[]
            })
            const router =useRouter();
            const onAdd=()=> {
                router.push({path:'/EditAddress',query:{type:'add'}})
            }
            const  onEdit=(item)=> {
                router.push({path:'/EditAddress',query:{type:'edit',addressId:item.id}})
            }

            onMounted(()=>{
                //遍历获取的地址
                Getaddress().then(res=>{
                    if (res.data.length==0){
                        state.list=[]
                        return
                    }

                    state.list=res.data.map(item=>{
                        return{
                            id:item.id,
                            name:item.name,
                            tel:item.phone,
                            address:`${item.province} ${item.city} ${item.county} ${item.address}`,
                            isDefault:!!item.is_default
                        }
                    })
                })
            })
            return{
                ...toRefs(state),
                onAdd,
                onEdit
            }
        },

    }
</script>

<style scoped>
.address-body{
    margin-top: 50px;
}
</style>